<template>
    <div class="diy-desk">
        <div class="flex flex-1 gap-4 overflow-hidden">
            <!-- 预览窗口 -->
            <div class="preview-window">
                <Header  />

                <div class="h-full flex flex-1 overflow-hidden">
                    <Sidebar
                        :diy-data="diyData['asides']"
                        :active-tab="activeTab"
                        @click="handleChange('asides')"
                    />
                    <div class="layout-main">
                        <Bodies
                            :diy-data="diyData['boards']"
                            :active-tab="activeTab"
                            @change="handleChange"
                        />
                    </div>
                </div>
            </div>

            <!-- 编辑窗口 -->
            <div class="editor-window">
                <component
                    v-model="editData"
                    :is="componentMap[activeTab]"
                />
            </div>
        </div>

        <el-card shadow="never" class="!border-none mt-4 text-center">
            <el-button
                v-perms="['diy:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存装修</el-button>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import type { DeskDiyType } from './index.ts'
import feedback from '@/utils/feedback.ts'
import diyApi from '@/api/diy.ts'
import Bodies from './_pages/bodies.vue'
import Header from './_pages/header.vue'
import Sidebar from './_pages/sidebar.vue'
import EditorAsides from './_editor/editor-asides.vue'
import EditorQuick from './_editor/editor-quick.vue'

// 编辑组件
const vModelTab = ref('asides')
const activeTab = ref('asides')
const componentMap: any = {
    'asides': EditorAsides,
    'quick': EditorQuick,
}

// 提交状态
const loading = ref<boolean>(false)

// 装修数据
const diyData = ref<any>({} as DeskDiyType)

// 编辑数据
const editData = computed({
    get() {
        return diyData.value[vModelTab.value]
    },
    set(value) {
        diyData.value[vModelTab.value] = value
    }
})

/**
 * 查询装修数据
 */
const queryDiyData = async () => {
    // 查询数据
    const result = await diyApi.detail(200)
    // 设置数据
    diyData.value = result.data
    // 默认示例
    if (!diyData.value?.asides && !diyData.value?.boards) {
        diyData.value = {
            'asides': {
                nav: [{
                    name: '',
                    selected: '',
                    unselected: '',
                    is_enable: 1,
                    link: {}
                }],
                menu: [{
                    name: '',
                    selected: '',
                    is_enable: 1,
                    link: {}
                }]
            },
            'boards': {
                topic: {logo: '', title: '', intro: '', is_enable: 1},
                quick: [{name: '', intro: '', layout: '', lists: []}]
            }
        }
    }
}

/**
 * 切换编辑组件
 */
const handleChange = (tab: string) => {
    activeTab.value = tab
    switch (tab) {
        case 'topic':
        case 'quick':
            vModelTab.value = 'boards'
            break
        default:
            vModelTab.value = tab
    }
}

/**
 * 提交装修保存
 */
const handleSubmit = async () => {
    feedback.confirm('您确定要保存当前装修吗?')
        .then(async () => {
            loading.value = true
            await diyApi.save({
                scene: 200,
                data: diyData.value
            }).finally(() => {
                loading.value = false
            })
            await queryDiyData()
            feedback.msgSuccess('保存成功')
        }).catch()
}

onMounted(async () => {
    await queryDiyData()
})
</script>

<style scoped lang="scss">
.diy-desk {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 117px);
    .preview-window {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        border-radius: 4px;
        border: 2px dashed var(--el-border-color);
        background-color: var(--el-bg-color);
        .layout-main {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 15px;
            overflow: auto;
            background-color: var(--el-bg-color-page);
            border-top: 1px solid var(--el-border-color-light);
            border-left: 1px solid var(--el-border-color-light);
            border-top-left-radius: 12px;
        }
    }

    .editor-window {
        display: flex;
        flex-direction: column;
        width: 400px;
        background-color: var(--el-bg-color);
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--el-border-color-lighter);
    }
}
</style>
